<template>
  <div class="preview-container">
    <div v-if="filterList.length ||noImgFile.length " class="attchment-name">附件：</div>
    <div>
      <template v-if="filterList.length">
        <el-image
          v-for="v in filterList "
          :key="v"
          :src="v"
          :preview-src-list="filterList "
          style="width: 50px; height: 50px;margin:0px 2px 5px 2px"
          :z-index="9999"
        />

      </template>
      <template v-if="noImgFile.length">
        <div v-for="(v,i) in noImgFile" :key="i" class="file-list">
          <i class="el-icon-folder" />
          <span @click="downLoad(v.url)">
            {{ v.name }}
          </span>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import { filterAttacment, } from '@/filters';
export default {
  name: 'Attachment',
  props: {
    fileList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  computed: {
    filterList() {
      const f = this.fileList.map(e => this.$store.state.login.uriConfig.fileBaseUri + e.url);
      return filterAttacment(f);
    },
    noImgFile() {
      const f = this.fileList.map(e => {
        return {
          name: e.name,
          url: this.$store.state.login.uriConfig.fileBaseUri + e.url,
        };
      });
      return filterAttacment(f, true);
    },
  },
  methods: {
    downLoad(url) {
      window.location.href = url;
    },
  },
};
</script>
<style lang='scss' scoped>
.preview-container{
    display: flex;
        margin: 5px 0;

    .attchment-name{
        color: #2d405e;
        white-space:nowrap;
    }
}
    .file-list{
        cursor: pointer;
        color: #879bba;
        &:hover{
            color: #2d405e;
        }
    }
</style>
